<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Molly Note - 我的笔记</title>
    <link rel="stylesheet" href="style/note.css">
</head>
<body>
    <div class="note-container">
        <h1 class="note-title">我的笔记</h1>
        <!-- 搜索框 -->
        <div class="search-bar">
            <input type="text" id="searchInput" class="form-control" placeholder="请输入关键词搜索...">
            <button id="searchBtn" class="btn">查询</button>
        </div>
        <!-- 笔记表格 -->
        <table class="note-table">
            <thead>
                <tr>
                    <th>分类</th>
                    <th>标题</th>
                    <th>创建时间</th>
                    <th>是否公开</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="noteTableBody">
                <!-- JS动态填充笔记数据 -->
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" style="text-align:center;">
                        <button id="addNoteBtn" class="add-btn" type="button" onclick="window.location.href='create_note.html'">+</button>
                    </td>
                </tr>
            </tfoot>
        </table>
        <div class="footer">
            © 2025 Molly Note - 智能笔记助手
        </div>
    </div>
    <!-- 详情弹窗/模态框预留，可后续完善 -->
    <div id="noteDetailModal" class="modal" style="display:none;">
        <div class="modal-content">
            <span class="close" id="closeDetailModal">&times;</span>
            <h2 id="detailTitle"></h2>
            <p><strong>分类：</strong><span id="detailCategory"></span></p>
            <p><strong>内容：</strong></p>
            <div id="detailContent"></div>
            <p><strong>创建时间：</strong><span id="detailCreatedAt"></span></p>
            <p><strong>是否公开：</strong><span id="detailIsPublished"></span></p>
        </div>
    </div>
    <script src="tools/note.js"></script>
</body>
</html>